<template>
  <div class="login-page-bg">
    <el-row>
      <el-col :span="6" :offset="14">
        <el-card class="login-page-container">
          <div slot="header">用户登录</div>
          <el-form label-width="75px" label-suffix="：" ref="loginForm" :model="loginForm" :rules="loginRules">
            <el-form-item label="用户名" prop="userName">
              <el-input size="small" type="text" v-model="loginForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input size="small" type="password" v-model="loginForm.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="login" type="primary">登录</el-button>
              <el-button size="small" @click="cancel">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  /**
   *@Author Rain_tdk
   *@Date: 2018/6/7 10:20
   *@Description: 登陆页面
   *@ReviseAutor:
   *@ReviseDate:
   */
  import {loginApi} from '@/api/api'
  export default {
    data() {
      /**
       * 校验用户名
       * @param rule
       * @param value
       * @param callback
       * @returns {*}
       */
      var validateUserName = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('用户名不能为空'));
        }
        setTimeout(() => {
          if (value.length < 3) {
            return callback(new Error('用户名长度不得低于3位'))
          }
          callback()
        }, 500);
      };
      /**
       * 校验密码长度
       * @param rule
       * @param value
       * @param callback
       * @returns {*}
       */
      var validatePassword = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('密码不能为空'));
        }
        setTimeout(() => {
          if (value.length < 6) {
            return callback(new Error('密码长度不得低于6位'))
          }
          callback()
        }, 500);
      };

      return {
        loginRules: {
          userName: {validator: validateUserName, trigger: 'blur'},
          password: {validator: validatePassword, trigger: 'blur'}
        },
        loginForm: {
          userName: '',
          password: ''
        }
      }
    },
    computed: {},
    created() {
    },
    mounted() {
    },
    methods: {
      login(){
        this.$refs['loginForm'].validate((valid) => {
          if (valid) {
            loginApi.login().then(rq=>{
              let rqd = rq.data;
              if(rqd){
                sessionStorage.setItem('token',rqd.token);
                this.$router.push('/index')
              }
            }).catch(err=>{
              this.$message({
                type:'error',
                message:'登录失败'
              })
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      cancel(){
        this.$refs['loginForm'].resetFields();
      }
    },
    components: {},
  }
</script>

<style scoped>
  .login-page-bg {
    height: 100%;
    width: 100%;
    background-color: #eee;
  }

  .login-page-container {
    margin-top: 180px;
  }
</style>
